div拖拽时取消文字选中默认事件的解决方法

2023-12-16 13:11| 来源: 网络整理| 查看: 265

当我们对div进行拖拽时，会发现把div里的文字也选中了，其实我并不想选中文字，怎么解决呢？

我们分两种情况说，一种情况是直接给对象加事件如obj.onmousedown；另外一种是为对象绑定事件addEventListener。

先说第一种：比较简单，高版本的浏览直接加return false来阻止默认事件，低版本的IE系列则用obj.capature&&obj.capature();

第二，在事件绑定以后，return false 不起作用了。这时我们需要使用oEvent.preventDefault()来解决。低版本IE还是一样。

顺便提一句：事件绑定attachEvent中，不能使用this

无标题文档 #div{ position:absolute; width:200px; height:200px; background:#ccc; color:#000} ready(function(){ var oDiv=document.getElementById('div'); drag(oDiv); }) //拖拽原理：改变obj的top值与left值 function drag(obj) { addEvent(obj,'mousedown',function(ev){ var oEvent=ev||event; //不变的参考距离＝mousedown时鼠标坐标－obj到页面的左边距 var disX=oEvent.clientX-obj.offsetLeft; var disY=oEvent.clientY-obj.offsetTop; addEvent(document,'mousemove',move); addEvent(document,'mouseup',up); oEvent.preventDefault();//阻止默认事件，取消文字选中 function move(ev) { var oEvent=ev||event; var left=oEvent.clientX-disX; var top=oEvent.clientY-disY; obj.style.left=left+'px'; obj.style.top=top+'px'; obj.setCapture&&obj.setCapture();//低版本IE阻止默认事件，取消文字选中 } function up() { removeEvent(document,'mousemove',move); removeEvent(document,'mouseup',up); obj.releaseCapture&&obj.releaseCapture();//低版本IE取消阻止默认事件 } }) } //添加事件绑定 function addEvent(obj,sEv,fn) { if(obj.addEventListener) { obj.addEventListener(sEv,fn,false); }else{ obj.attachEvent('on'+sEv,fn); } } //删除事件绑定 function removeEvent(obj,sEv,fnName) { if(obj.removeEventListener) { obj.removeEventListener(sEv,fnName,false); }else{ obj.detachEvent('on'+sEv,fnName); } } //代码加载完执行js function ready(fn) { if(document.addEventListener) { document.addEventListener('DOMContentLoaded',fn,false) }else{ document.attachEvent('onreadystatechange',function(){ if(document.readyState=='complete') {fn();} }) } } 选不中我哦，选不中我的。

【本文地址】

公司简介

联系我们